<template>
<a style="display:inline-block;" :id="id" :href="imgSrc" class="fancybox-button" data-rel="fancybox-button">
    <img class="img-responsive" :style="{height:height?height+'px':'auto',width:width?width+'px':'auto'}"  :src="imgSrc" alt="">
</a>
</template>
<script>
export default{
    props:{
        width:{
            type: Number,
            default: 0,
        },
        height:{
            type: Number,
            default: 0,
        },
        imgSrc:{
            type: String
        }
    },
    data(){
        return{
            id: 'img-'+new Date().getTime()
        }
    },
    ready(){
        $('#'+this.id).fancybox({
            helpers: {
                title: {
                    type: 'inside'
                }
            }
        });
    }
}
</script>
<style>

.fancybox-overlay{
  z-index: 99999;
}
</style>